<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Document</title>
    <style>
        .screen {
            width: 1600px;
            height: 900px;
            background-color: darkslategrey;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .tank {
            background-color: darkslategrey;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
<div class="screen">
    <img alt="" class="tank" src="./static/tankR.gif">
</div>

</body>

<script>
    let container = document.querySelector(".screen")
    let cStyle = getComputedStyle(container)
    let speed = 10
    let containerSize = {
        width: parseInt(cStyle.width),
        height: parseInt(cStyle.height),
        left: parseInt(cStyle.left),
        right: parseInt(cStyle.right),
    }
    let imgConfig = {
        leftSrc: "./static/tankL.gif",
        rightSrc: "./static/tankR.gif",
        topSrc: "./static/tank.gif",
        leftSrc: "./static/tankR.gif",
    }


    window.addEventListener("keydown", function (e) {
        let keyType = e.code
        console.log(keyType);
        // switch (keyType) {
        //     case "KeyW":
        //         break
        //     case "KeyA":
        //         break
        //     case "KeyS":
        //         break
        //     case "KeyD":
        //         break
        //     case "ShiftLeft":
        //         break
        //
        // }
    })


    function move(src, step) {

    }


</script>
</html>
